<!DOCTYPE html>
<html lang="en">
<head>
  <title>jquery插件icheck api使用（美化checkbox和radio样式）</title>
  <meta charset="utf-8">
  <meta content="width=device-width" name="viewport">

  <!--icheck的样式文件-->
  <link href="http://cdn.bootcss.com/iCheck/1.0.2/skins/all.css" rel="stylesheet">
  <style>
    body,a{ font-size: 14px; color: #333;}
    th,td{ padding: 6px;}
  </style>
</head>
<body style="padding: 50px;">

<p>jquery插件icheck.js是一个用来美化checkbox和radio样式的插件，icheck提供了丰富的皮肤和回调事件，本文提供icheck api使用和实战演示</p>

<p>具体的基本使用方法官方icheck教程已经写的很多，可以看官方demo</p>
<p>下面来写一个表格中的选中、全选功能来看看icheck怎么在实际项目中使用，这里对icheck.js和css资源的引用全部使用外部icheck cdn</p>
<table id="testTable">
  <thead>
    <tr><th><input type="checkbox" class="js-checkbox-all"> 全选</th></tr>
  </thead>
  <tbody>
    <tr><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox"></td></tr>
    <tr><td><input type="checkbox" disabled></td></tr>
    <tr><td><input type="checkbox"></td></tr>
  </tbody>
</table>

<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<!--icheck的js文件-->
<script src="http://cdn.bootcss.com/iCheck/1.0.2/icheck.min.js"></script>
<script>
var $checkboxAll = $(".js-checkbox-all"),
    $checkbox = $("tbody").find("[type='checkbox']").not("[disabled]"),
    length = $checkbox.length,
    i=0;

//启动icheck
$(("[type='checkbox']")).iCheck({
  checkboxClass: 'icheckbox_minimal-blue',
  radioClass: 'iradio_square-blue'
});

//全选checkbox
$checkboxAll.on("ifClicked",function(event){
  if(event.target.checked){
    $checkbox.iCheck('uncheck');
    i=0;
  }else{
    $checkbox.iCheck('check');
    i=length;
  }
});

//监听计数
$checkbox.on('ifClicked',function(event){
  event.target.checked ? i-- : i++;
  if(i==length){
    $checkboxAll.iCheck('check');
  }else{
    $checkboxAll.iCheck('uncheck');
  }
})

</script>
</body>
</html>
